<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="logosm">
        <img src="../assets/logo.png" alt />
      </div>
      <div class="admin">
        <img src="../assets/avatar.png" alt="" />
        <p>{{ name }}</p>
        <div class="btn" @click="exitdown">
          <div class="sel" v-if="show">
            <ul>
              <li @click="edit">修改密码</li>
              <li @click="centerDialogVisible = true">退出登录</li>
            </ul>
          </div>
        </div>
      </div>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区域 -->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
          <!-- 一级菜单 -->
          <!-- <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id"> -->
          <!-- 一级菜单模板区域 -->
          <!-- <template slot="title"> -->
          <!-- 图标 -->
          <!-- <i :class="iconsObj[item.id]"></i> -->
          <!-- 文本 -->
          <!-- <span>{{ item.authName }}</span>
            </template> -->
          <!-- 二级菜单 -->
          <!-- <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState(subItem.path)">
              <template slot="title"> -->
          <!-- 图标 -->
          <!-- <i class="el-icon-menu"></i> -->
          <!-- 文本 -->
          <!-- <span>{{ subItem.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu> -->
          <!-- <el-submenu>
            <template slot="title"> -->
          <!-- 图标 -->
          <!-- <i :class="iconsObj[1]"></i> -->
          <!-- 文本 -->
          <!-- <span>yonghuguanli </span>
            </template>
          </el-submenu> -->

          <el-menu-item index="/usermanager" @click="saveNavState('/usermanager')">
            <!-- 图标 -->
            <i class="el-icon-user"></i>
            <!-- 文本 -->
            <span>用户管理</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-date"></i>
              <!-- 文本 -->
              <span>预约管理</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="/yuyue/list" @click="saveNavState('/yuyue/list')">
              <template slot="title">
                <!-- 图标 -->
                <!-- 文本 -->
                <span>预约列表</span>
              </template>
            </el-menu-item>
            <!-- 二级菜单 -->
            <el-menu-item index="/yuyue/rili" @click="saveNavState('/yuyue/rili')">
              <template slot="title">
                <!-- 图标 -->
                <!-- 文本 -->
                <span>预约日历</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-picture-outline"></i>
              <!-- 文本 -->
              <span>案例管理</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="/image/manageimage" @click="saveNavState('/image/manageimage')">
              <template slot="title">
                <!-- 图标 -->
                <!-- 文本 -->
                <span>图片管理</span>
              </template>
            </el-menu-item>
            <!-- 二级菜单 -->
            <el-menu-item index="/image/classification" @click="saveNavState('/image/classification')">
              <template slot="title">
                <!-- 图标 -->
                <!-- 文本 -->
                <span>分类管理</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="/goods" @click="saveNavState('/goods')">
            <!-- 图标 -->
            <i class="el-icon-s-goods"></i>
            <!-- 文本 -->
            <span>商品管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧主体区域 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
    <!-- 修改管理员信息弹窗 -->
    <edit-admin ref="editAdminChild"></edit-admin>
    <!-- 退出登录弹窗 -->
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="20%" center>
      <span style="textalign: center">是否退出登录</span>
      <span slot="footer" class="dialog-footer">
        <button @click="centerDialogVisible = false">取 消</button>
        <button type="primary" @click="exit">确 定</button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import editAdmin from './editAdmin.vue'
export default {
  components: {
    editAdmin
  },
  data() {
    return {
      name: sessionStorage.getItem('userName'), // 用户名信息
      centerDialogVisible: false, // 退出登录弹窗状态
      show: false,
      // 左侧菜单数据
      // menulist: [{ authName: '用户管理', id: 0, path: 'usermanager' }, { authName: '预约管理', id: 1, children: [{ authName: '预约列表', id: 2, path: 'list' }, { authName: '预约日历', id: 3, path: 'rili' }] }, { authName: '案例管理', id: 4, children: [{ authName: '图片管理', id: 5, path: 'manageimage' }, { authName: '分类管理', id: 6, path: 'classification' }] }],

      // 是否折叠
      isCollapse: false,
      // 被激活的链接地址
      activePath: ''
    }
  },
  created() {
    // this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    exitdown() {
      this.show = !this.show
    },
    // 推出登录
    exit() {
      // 清空token
      window.sessionStorage.clear()
      // 跳转到登录页
      this.$router.push('/login')
    },
    // 修改账号信息
    edit() {
      console.log('修改账户信息')
      this.$refs.editAdminChild.openDialog()
    },
    // 获取所有的菜单
    // async getMenuList() {
    //   const res = await this.$http.get('menus')
    //   if (res.data.code !== 200) return this.$message.error(res.meta.msg)
    //   this.menulist = res.data
    //   // console.log(res)
    // },
    // 点击按钮，切换按钮的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    // 保存链接的激活状态
    saveNavState(activePath) {
      // console.log(this)
      // this.reload()
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>

<style>
body,
html,
#app {
  min-width: 1100px !important;
}
</style>
<style lang="less" scoped>
.home-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.el-header {
  width: 100%;
  height: 50px !important;
  background: url('~@/assets/header.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > .logosm {
    align-items: center;
    img {
      width: 168px;
      height: 22px;
      margin-left: 31px;
    }
  }
  .admin {
    width: 160px;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
      vertical-align: middle;
    }
    p {
      display: inline-block;
      margin: 0;
      margin-left: 10px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 60px;
    }
    .btn {
      display: inline-block;
      width: 10px;
      height: 7px;
      background: url('~@/assets/littletri.png') no-repeat center center;
      background-size: 100% 100%;
      margin-left: 10px;
      cursor: pointer;
      position: relative;
      .sel {
        position: absolute;
        right: -22px;
        bottom: -105px;
        width: 118px;
        height: 90px;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 2px 2px 6px 0px rgba(51, 51, 51, 0.5);
        // display: none;
        z-index: 99;
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
          margin-top: 9px;
          li {
            width: 103px;
            height: 30px;
            border-radius: 15px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #555555;
            line-height: 30px;
            text-align: center;
            margin: 10px auto;
          }
          li:hover {
            background: #333333;
            color: #fff;
          }
        }
      }
    }
    // .btn:hover {
    //   .sel {
    //     display: block;
    //   }
    // }
    // p::after {
    //   content: '';
    //   display: inline-block;
    //   width: 10px;
    //   height: 7px;
    //   background: url('~@/assets/littletri.png') no-repeat center center;
    //   background-size: 100% 100%;
    //   margin-left: 10px;
    // }
  }
}
.el-aside {
  width: 200px;
  background: url('~@/assets/aslide.png') no-repeat center center;
  background-size: auto auto;

  .el-menu {
    border-right: none;
    background-color: rgba(0, 0, 0, 0);
  }
}
.el-main {
  flex: 1;
  padding: 0;
  box-sizing: border-box;
  background-color: #ffffff;
}
.iconfont {
  margin-right: 10px;
}
.toggle-button {
  background-color: rgba(0, 0, 0, 0);
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.dialog-footer {
  button:nth-child(1) {
    width: 99px;
    height: 35px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #333333;
    margin-right: 20px;
    cursor: pointer;
  }
  button:nth-child(2) {
    width: 99px;
    height: 35px;
    background: #333333;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
  }
}
</style>
